<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="服务详情"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <u-swiper height="400" :list="[serviceInfo.img]"></u-swiper>
    <view class="title">{{ serviceInfo.name }}</view>
    <view style="padding: 30rpx;">
      <view class="row">服务特色：{{ serviceInfo.specials || '' }}</view>
      <view class="row">服务详情：{{ serviceInfo.descr || '' }}</view>
      <view class="row">服务价格（元）：{{ serviceInfo.price }}</view>
    </view>
    <view class="pay" v-if="userInfo.id">
      <view class="cart" @click="openModal">预约</view>
    </view>
  </view>
</template>

<script>
import { getGoodsById } from "../../api/system/api";
import moment from 'moment';
export default {
  data() {
    return {
      userInfo: {},
      serviceInfo: {},
      showC: false,
      minDate: moment().format('YYYY-MM-DD'),
      maxDate: moment().add(15, 'days').format('YYYY-MM-DD'),
      showModal: false,
    };
  },
  onLoad(option) {
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.userInfo = res.data;
      },
    });
    let serviceId = option.article
    getGoodsById(Number(serviceId)).then(res => {
      this.serviceInfo = res.data
    })
  },
  methods: {
    openModal() {
      if (this.userInfo.id) {
        // 查看余额是否充足
        if (this.userInfo.money < this.serviceInfo.price) {
          this.$refs.uToast.show({
            title: "余额不足，请到个人中心充值~",
            type: "error",
          });
          return
        }
        console.log(this.serviceInfo)
        this.$u.route("/pages/good/payDetail", {
          goods: JSON.stringify([
            {
              goodsId: this.serviceInfo.id,
              goodsImg: this.serviceInfo.img,
              goodsName: this.serviceInfo.name,
              goodsPrice: this.serviceInfo.price,
              num: 1
            }
          ]),
          userId: this.userInfo.id
        });
      } else {
        this.$refs.uToast.show({
          title: "请先登录~",
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fff3f3;
}

.title {
  width: 100%;
  text-align: center;
  margin-top: 10rpx;
  font-weight: bold;
  color: #333;
}
.subtitle {
  width: 100%;
  text-align: center;
  margin-top: 10rpx;
  color: #666;
}
.auther {
  width: 100%;
  text-align: left;
  margin-top: 10rpx;
  color: #333;
}
.aligntime {
  width: 100%;
  text-align: right;
  margin-top: 10rpx;
  color: #333;
}
.pay {
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 100rpx;
	padding: 12rpx 20rpx;
	display: flex;
	background: #fff;
  padding-top: 20rpx;
  justify-content: flex-end;
  .cart {
    padding: 10rpx 26rpx;
    height: 60rpx;
    line-height: 40rpx;
    text-align: center;
    color: #fff;
    background: red;
    border-radius: 30rpx;
  }
}
.row {
  line-height: 50rpx;
}
</style>
